<script lang="tsx">
import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
import { ref, watch, computed, unref, defineComponent, TransitionGroup } from 'vue'
import { useRouter } from 'vue-router'
import { usePermissionStore } from '@/store/modules/permission'
import { filterBreadcrumb } from './helper'
import { filter, treeToList } from '@/utils/tree'
import { useI18n } from '@/hooks/web/useI18n'
import { Icon } from '@/components/Icon'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('breadcrumb')

const appStore = useAppStore()

// 面包屑图标
const breadcrumbIcon = computed(() => appStore.getBreadcrumbIcon)

export default defineComponent({
  name: 'Breadcrumb',
  setup() {
    const { currentRoute } = useRouter()

    const { t } = useI18n()

    const levelList = ref([])

    const permissionStore = usePermissionStore()

    const menuRouters = computed(() => {
      const routers = permissionStore.getRouters
      return filterBreadcrumb(routers)
    })

    const getBreadcrumb = () => {
      const currentPath = currentRoute.value.path

      levelList.value = filter(unref(menuRouters), (node) => {
        return node.path === currentPath
      })
    }



    watch(
      () => currentRoute.value,
      (route) => {
        if (route.path.startsWith('/redirect/')) {
          return
        }
        getBreadcrumb()
      },
      {
        immediate: true
      }
    )
    const renderBreadcrumb = () => {
          const breadcrumbList = treeToList(unref(levelList))
          return breadcrumbList.map((v) => {
            const disabled = v.redirect === 'noredirect'
            const meta = v.meta
            return (
              <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
                {meta?.icon && breadcrumbIcon.value ? (
                  <>
                    <Icon icon={meta.icon} class="mr-[5px]"></Icon> {t(v?.meta?.title)}
                  </>
                ) : (
                  t(v?.meta?.title)
                )}
              </ElBreadcrumbItem>
            )
          })
        }
        
    return () => {
      const breadcrumbList = treeToList(unref(levelList))
      return (
        <ElBreadcrumb separator="/" class={`${prefixCls} flex items-center h-full ml-[10px]`}>
          <TransitionGroup appear enter-active-class="animate__animated animate__fadeInRight">
            {
              breadcrumbList.map((v) => {
            const disabled = v.redirect === 'noredirect'
            const meta = v.meta
            return (
              <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
                {meta?.icon && breadcrumbIcon.value ? (
                  <>
                    <Icon icon={meta.icon} class="mr-[5px]"></Icon> {t(v?.meta?.title)}
                  </>
                ) : (
                  t(v?.meta?.title)
                )}
              </ElBreadcrumbItem>
            )
          })
            }
          </TransitionGroup>
        </ElBreadcrumb>
      )
    }
  }
})
</script>

<style lang="less" scoped>
@prefix-cls: ~'@{elNamespace}-breadcrumb';

.@{prefix-cls} {
  :deep(&__item) {
    display: flex;
    .@{prefix-cls}__inner {
      display: flex;
      align-items: center;
      color: var(--top-header-text-color);

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  :deep(&__item):not(:last-child) {
    .@{prefix-cls}__inner {
      color: var(--top-header-text-color);

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  :deep(&__item):last-child {
    .@{prefix-cls}__inner {
      color: var(--el-text-color-placeholder);

      &:hover {
        color: var(--el-text-color-placeholder);
      }
    }
  }
}
</style>
